<template>
  <div class="pipeContent">
    <div ref="myChart" :style="{ width: '100%', height: '95%' }"></div>
  </div>
</template>

<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
//  导入工具部分
require("echarts/lib/component/legendScroll");
require("echarts/lib/component/graphic");
// 引入柱状图组件
require("echarts/lib/chart/pie");
require("echarts/lib/chart/bar");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

export default {
  name: "MyPipeChart",
  components: {
    echarts,
  },
  props: ["pipeclass", "echartsData"],
  data() {
    return {
      myChart: null,
    };
  },
  created() { },
  beforeCreate() { },
  mounted() {
    let dom = this.$refs.myChart;
    this.myChart = echarts.init(dom);
    this.initChart();
  },
  methods: {
    // 初始化图表
    initChart() {
      switch (this.pipeclass) {
        case "monitorPipe":
          this.monitorPipe();
          break;
        case "monitorState":
          this.monitorState();
          break;
        case "rolesChart":
          this.rolesChart();
          break;
        case "lengendChart":
          this.lengendChart();
          break;
        case "normalPipe":
          this.normalPipe();
          break;
        case "pipeAndBar":
          this.pipeAndBar();
          break;
        case "homeGasPipe":
          this.homeGasPipe();
          break;
        case "homeAleart":
          this.homeAleart();
          break;
        case "DriverBehaviorAnalysis":
          this.DriverBehaviorAnalysis();
          break;
      }
    },
    // 解析返回物联网统计饼图
    monitorPipe() {
      let arry = [];
      let colorArry = [
        "#31ccff",
        "#f3e00b",
        "#5ED77D",
        "#f3e00b",
        "#FFBE05",
        "#D61DF2",
      ];
      let count = 0;
      this.echartsData.forEach((v, i) => {
        if (v.list.length > 0) {
          count += v.list.length;
          arry.push({
            value: v.list.length,
            legendname: v.name,
            name: v.name + `  ` + v.list.length,
            itemStyle: { color: colorArry[i] },
          });
        }
      });
      this.myChart.setOption({
        title: [
          {
            text: count,
            subtext: "合计",
            textStyle: {
              fontSize: 40,
              color: "#ffffff",
              fontWeight: 300,
            },
            subtextStyle: {
              fontSize: 20,
              color: "#ffffff",
            },
            textAlign: "center",
            x: "28%",
            y: "23%",
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: function (parms) {
            return `${parms.seriesName}</br>${parms.marker}数量：${parms.data.legendname}  ${parms.data.value}</br>占比：${parms.percent}%`;
          },
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "60%",
          align: "left",
          top: "5%",
          itemWidth: 24,
          itemHeight: 12,

          textStyle: {
            color: "#ffffff",
            fontSize: 16,
            rich: {
              a: {
                align: "center",
                fontSize: 16,
              },
              b: {
                align: "center",
                fontSize: 18,
              },
            },
          },

          formatter: function (parms) {
            parms = parms.split(`  `);
            if (parms.length > 1) {
              return `{a|${parms[0]}}  {b|${parms[1]}}`;
            } else {
              return `{${parms[0]}}`;
            }
          },
          height: 250,
        },

        series: [
          {
            name: "设备统计",
            type: "pie",
            center: ["30%", "35%"],
            radius: ["50%", "60%"],
            label: {
              normal: {
                show: false,
              },
            },
            data: arry,
          },
        ],
      });
    },
    // 解析返回物联网在离线报警状态饼图
    monitorState() {
      let dataStyle = {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          shadowBlur: 0,
          shadowColor: "#203665",
        },
      };
      let rich = {
        a: {
          color: "#fff",
          align: "center",
          fontSize: 20,
          fontWeight: "bold",
        },
        b: {
          color: "#fff",
          align: "center",
          fontSize: 16,
        },
      };

      let count = 0;
      let onlineCount = 0; // 在离线
      let aleartCount = 0; // 报警
      this.echartsData.forEach((v, i) => {
        if (v.list.length > 0) {
          count += v.list.length;
          v.list.forEach((vv, ii) => {
            if (vv.isOnline) {
              onlineCount++;
            }
            if (vv.isAleart) {
              aleartCount++;
            }
          });
        }
      });
      this.myChart.setOption({
        series: [
          {
            name: "在线",
            type: "pie",
            clockWise: false,
            radius: [40, 50],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ["20%", "50%"],
            data: [
              {
                value: onlineCount,
                label: {
                  normal: {
                    rich: rich,
                    formatter: function (params) {
                      return `{a|${params.value}}\n\n{b|在线}`;
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "14",
                      fontWeight: "normal",
                      color: "#fff",
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#5ED77D",
                    shadowColor: "#407783",
                    // shadowBlur: 2,
                    // borderWidth: 1,
                    // borderColor: "#407783"
                  },
                },
              },
              {
                value: count - onlineCount,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: "#407783",
                  },
                  emphasis: {
                    color: "#407783",
                  },
                },
              },
            ],
          },
          {
            name: "离线",
            type: "pie",
            clockWise: false,
            radius: [40, 50],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ["50%", "50%"],
            data: [
              {
                value: count - onlineCount,
                label: {
                  normal: {
                    rich: rich,
                    formatter: function (params) {
                      return `{a|${params.value}}\n\n{b|离线}`;
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "14",
                      fontWeight: "normal",
                      color: "#fff",
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#88B8FF",
                    shadowColor: "#88B8FF",
                    // shadowBlur: 2,
                    // borderWidth: 1,
                    // borderColor: "#466A9A"
                  },
                },
              },
              {
                value: onlineCount,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: "#466A9A",
                  },
                  emphasis: {
                    color: "#466A9A",
                  },
                },
              },
            ],
          },
          {
            name: "报警",
            type: "pie",
            clockWise: false,
            radius: [40, 50],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ["80%", "50%"],
            data: [
              {
                value: aleartCount,
                label: {
                  normal: {
                    rich: rich,
                    formatter: function (params) {
                      return `{a|${params.value}}\n\n{b|报警}`;
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "14",
                      fontWeight: "normal",
                      color: "#fff",
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#FF3472",
                    shadowColor: "#FF3472",
                    // shadowBlur: 2,
                    // borderWidth: 1,
                    // borderColor: "#5D4E7C"
                  },
                },
              },
              {
                value: count - aleartCount,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: "#5D4E7C",
                  },
                  emphasis: {
                    color: "#5D4E7C",
                  },
                },
              },
            ],
          },
        ],
      });
    },
    // 玫瑰图
    rolesChart() {
      let data = [
        {
          value: 254,
          name: "类型1",
        },
        {
          value: 254,
          name: "类型2",
        },
        {
          value: 184,
          name: "类型3",
        },
      ];
      let shape = {
        r: 22,
        cx: 162,
        cy: 99,
      };
      if (this.echartsData) {
        data = this.echartsData.data ? this.echartsData.data : data;
        shape = this.echartsData.shape ? this.echartsData.shape : shape;
      }
      this.myChart.setOption({
        legend: {
          orient: "vertical",
          x: "62%",
          y: "20%",
          itemWidth: 27,
          itemHeight: 13,
          textStyle: {
            fontSize: 15,
            color: "#ffffff",
          },
        },
        graphic: {
          elements: [
            {
              type: "circle",
              style: {
                fill: "#516C91",
              },
              shape: shape,
            },
          ],
        },
        tooltip: {
          trigger: "item",
          formatter: function (parms) {
            var str = `${parms.name}</br>${parms.marker}长度:${parms.data.value}公里</br>占比：${parms.percent}%`;
            return str;
          },
        },
        series: [
          {
            type: "pie",
            radius: [30, "55%"],
            center: ["35%", "35%"],
            roseType: "radius",
            color: ["#ffad05", "#3dd1f9", "#15b76d"],
            data: data,
            label: {
              normal: {
                show: true,
                rich: {
                  a: {
                    align: "center",
                    fontSize: 20,
                  },
                  b: {
                    color: "#fff",
                    align: "center",
                    fontSize: 15,
                  },
                },
                textStyle: {
                  fontSize: 14,
                },
                formatter: function (param) {
                  return `{a|${param.value}}\n{b|${param.name.substring(
                    0,
                    3
                  )}}`;
                },
              },
            },
            labelLine: {
              normal: {
                smooth: true,
                length: 2,
                length2: 7,
                lineStyle: {
                  width: 2,
                },
              },
            },
            itemStyle: {
              normal: {
                shadowBlur: 30,
                shadowColor: "rgba(0, 0, 0, 0.4)",
              },
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      });
    },
    // 饼图，自定义图例----1
    lengendChart() {
      let color = [
        "#3dd1f9",
        "#d61df2",
        "#00c6c4",
        "#137cff",
        "#da75ff",
        "#a146ff",
      ];
      let rich = {
        a: { align: "center", fontSize: 16, color: "#fff" },
        b: { align: "center", fontSize: 20 },
      };
      let lengendXY = { x: "50%", y: "30%" };
      let data = [
        { value: 335, name: "类型1" },
        { value: 310, name: "类型2" },
      ];

      if (this.echartsData.length > 0) {
        data = this.echartsData;
        if (this.echartsData.length >= 4) {
          lengendXY = { x: "45%", y: "15%" };
        } else if (this.echartsData.length >= 3) {
          lengendXY = { x: "50%", y: "18%" };
        }
      }
      this.myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} Km({d}%)",
        },
        color: color,
        legend: {
          x: lengendXY.x,
          y: lengendXY.y,
          data: data,
          orient: "vertical",
          align: "top",
          itemGap: 50,
          itemWidth: 118,
          itemHeight: 7,
          color: color,
          textStyle: {
            padding: [-40, 0, 10, 0],
            rich: rich,
            color: color,
          },
          formatter: function (name) {
            let value = 0;
            data.forEach((v, i) => {
              if (v.name == name) {
                value = v.value;
              }
            });
            return `{b|${value}}\n  {a|${name}(Km)}`;
          },
        },
        series: [
          {
            type: "pie",
            radius: "55%",
            center: ["25%", "40%"],
            data: data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },

            itemStyle: {
              normal: {
                label: {
                  show: false,
                  position: "inside",
                  formatter: "{b}",
                },
              },
              labelLine: { show: true },
            },
          },
        ],
      });
    },

    // 常规环形饼图
    normalPipe() {
      var m2R2Data = [
        { value: 335, name: "正常", itemStyle: { color: "#5ed77e" } },
        { value: 310, name: "报警", itemStyle: { color: "#f7246e" } },
      ];
      let allCount = 0;
      let lengendXY = { x: "57%", y: "17%" };

      if (this.echartsData) {
        m2R2Data = this.echartsData.m2R2Data ? this.echartsData.m2R2Data : m2R2Data;
        allCount = this.echartsData.allCount ? this.echartsData.allCount : allCount;
        lengendXY = this.echartsData.lengendXY
          ? this.echartsData.lengendXY
          : lengendXY;
      }

      this.myChart.setOption({
        title: [
          {
            text: allCount,
            subtext: "总数",
            textStyle: {
              fontSize: 34,
              color: "#fff",
              fontFamily: "黑体",
            },
            subtextStyle: {
              fontSize: 18,
              color: "#fff",
            },
            textAlign: "center",
            x: "23%",
            y: "18%",
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: function (parms) {
            var str =
              parms.marker +
              "" +
              parms.data.name +
              "</br>" +
              "数量：" +
              parms.data.value +
              "</br>" +
              "占比：" +
              parms.percent +
              "%";
            return str;
          },
        },
        legend: {
          orient: "vertical",
          align: "top",
          itemGap: 50,
          itemWidth: 88,
          itemHeight: 7,
          x: lengendXY.x,
          y: lengendXY.y,
          height: 250,
          textStyle: {
            padding: [-40, 0, 10, 0],
            rich: {
              a: {
                align: "center",
                fontSize: 16,
                color: "#fff",
              },
              b: {
                align: "center",
                fontSize: 18,
                color: "#fff",
              },
            },
            color: "#8C8C8C",
          },
          formatter: function (name) {
            let _this = this;
            let value = 0;
            m2R2Data.forEach((v, i) => {
              if (v.name == name) {
                value = v.value;
              }
            });
            return `  {a|${name}}  {b|${value}} `;
          },
        },
        series: [
          {
            type: "pie",
            center: ["25%", "35%"],
            radius: ["40%", "65%"],
            clockwise: false, // 饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "outter",
                formatter: function (parms) {
                  return parms.data.legendname;
                },
              },
            },
            labelLine: {
              normal: {
                length: 5,
                length2: 3,
                smooth: true,
              },
            },
            data: m2R2Data,
          },
        ],
      });
    },
    // 饼图柱状图
    pipeAndBar() {
      let data = [
        ["product", "nums"],
        ["梁式桥", 2],
        ["钢铁桥", 8],
        ["拱桥", 10],
        ["悬索桥", 3],
        ["其他", 12],
      ];
      if (this.echartsData) {
        data = this.echartsData.data ? this.echartsData.data : data;
      }

      this.myChart.setOption({
        dataset: {
          source: data,
        },
        color: [
          "#d74e67",
          "#0092ff",
          "#eba954",
          "#21b6b9",
          "#60a900",
          "#01949b",
          " #f17677",
        ],
        grid: {
          left: "45%",
          top: "5%",
          right: "15%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            show: false,
          },
          {
            show: false,
          },
        ],
        yAxis: {
          type: "category",
          inverse: true,
          show: false,
        },

        series: [
          {
            tooltip: {
              trigger: "item",
              formatter: "{b} : {c} ({d}%)",
            },
            type: "pie",
            center: ["25%", "48%"],
            radius: ["30%", "40%"],
            avoidLabelOverlap: false,

            label: {
              normal: {
                formatter: "{b}\n{d}%",
              },
            },
            labelLine: {
              normal: {
                show: true,
              },
            },
            encode: {
              itemName: "product",
              value: "nums",
            },
          },
          // 亮色条 百分比
          {
            show: true,
            type: "bar",
            barGap: "-100%",
            barWidth: "20%",
            z: 2,
            color: function (params) {
              // build a color map as your need.
              let colorList = [
                "#d74e67",
                "#0092ff",
                "#eba954",
                "#21b6b9",
                "#60a900",
                "#01949b",
                " #f17677",
              ];
              return colorList[params.dataIndex];
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: 20,
                },
                position: "right",
              },
            },
            encode: {
              x: "nums",
            },
          },
          // 年份
          {
            show: true,
            type: "bar",
            xAxisIndex: 1, // 代表使用第二个X轴刻度
            barGap: "-20%",
            barWidth: "20%",
            itemStyle: {
              normal: {
                barBorderRadius: 200,
                color: "transparent",
              },
            },
            label: {
              normal: {
                show: true,
                position: [0, "-20"],
                formatter: "{b}",
                textStyle: {
                  fontSize: 12,
                  color: "#fff",
                },
              },
            },
            encode: {
              y: "product",
            },
          },
        ],
      });
    },
    //首页燃气统计
    homeGasPipe() {
      var data = {
        seriesData1: [
          {
            value: 30,
            name: "调压柜",
            itemStyle: {
              color: "#00d8ff",
            },
          },
          {
            value: 30,
            name: "调压站",
            itemStyle: {
              color: "#0eb392",
            },
          },
          {
            value: 30,
            name: "检查井",
            itemStyle: {
              color: "#ff5534",
            },
          },
        ],
        seriesData2: [
          {
            value: 30,
            name: "调压柜",
            itemStyle: {
              color: "#00d8ff",
              opacity: 0.6,
            },
          },
          {
            value: 30,
            name: "调压站",
            itemStyle: {
              color: "#0eb392",
              opacity: 0.6,
            },
          },
          {
            value: 30,
            name: "检查井",
            itemStyle: {
              color: "#ff5534",
              opacity: 0.6,
            },
          },
        ],
        eqCount: 0,
      };
      if (this.echartsData) {
        data = this.echartsData ? this.echartsData : data;
      }
      this.myChart.setOption({
        legend: {
          orient: "vertical",
          show: true,
          right: "10%",
          top: "25%",
          icon: "circle",
          itemHeight: 14,
          itemGap: 20,
          textStyle: {
            color: "#fff",
            fontSize: 14,
            lineHeight: 20,
            rich: {
              a: {
                color: "#01da90",
                fontSize: 16,
              },
              b: {
                color: "#00d8ff",
                fontSize: 16,
              },
            },
          },
          formatter: (name) => {
            switch (name) {
              case "调压柜":
                return (
                  "调压柜  {b|" +
                  data.seriesData1[0].value +
                  "} " +
                  "\r在线   {a|" +
                  data.seriesData2[0].value +
                  "} "
                );
              case "调压站":
                return (
                  "调压站  {b|" +
                  data.seriesData1[1].value +
                  "} " +
                  "\r在线   {a|" +
                  data.seriesData2[1].value +
                  "} "
                );
              case "检查井":
                return (
                  "检查井  {b|" +
                  data.seriesData1[2].value +
                  "} " +
                  "\r在线   {a|" +
                  data.seriesData2[2].value +
                  "} "
                );
              default:
                break;
            }
          },
        },
        tooltip: {
          show: true,
        },
        series: [
          {
            type: "pie",
            radius: ["60%", "70%"],
            center: ["30%", "45%"],
            hoverAnimation: false,
            z: 10,
            label: {
              position: "center",
              formatter: () => {
                return "{total|" + data.eqCount + "}\r\n设备总数";
              },
              rich: {
                total: {
                  fontSize: 22,
                  color: "#fff",
                },
              },
              color: "#fff",
              fontSize: 17,
              lineHeight: 30,
            },
            data: data.seriesData1,
            labelLine: {
              show: false,
            },
          },
          {
            type: "pie",
            radius: ["50%", "60%"],
            center: ["30%", "45%"],
            hoverAnimation: false,
            label: {
              show: false,
            },
            data: data.seriesData2,
            labelLine: {
              show: false,
            },
          },
        ],
      });
    },
    //首页预警统计图表
    homeAleart() {
      var data = {
        aleratCount: 0,
        seriesData: [
          { value: 0, name: "供水" },
          { value: 0, name: "排水" },
          { value: 0, name: "燃气" },
          { value: 0, name: "井盖" },
          { value: 0, name: "桥梁" },
        ],
      };

      if (this.echartsData) {
        data = this.echartsData ? this.echartsData : data;
      }
      this.myChart.setOption({
        tooltip: {
          formatter: function (a) {
            switch (a.seriesName) {
              case "预警统计1":
                return a.marker + "总计<br/>" + data.aleratCount;
                break;
              case "预警统计2":
                return a.marker + a.name + "<br/>" + a.value;
                break;
              case "预警统计3":
                return a.marker + a.name + "<br/>" + a.percent + "%";
                break;
            }
          },
        },
        series: [
          {
            name: "预警统计1",
            type: "pie",
            selectedMode: "single",
            radius: ["0", "30%"],
            center: ["50%", "60%"],
            animation: false,
            label: {
              normal: {
                show: true,
                position: "center",
                color: "#ffffff",
                fontSize: 18,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "#0057a7",
              },
            },

            data: [
              {
                value: data.aleratCount,
                name: "" + data.aleratCount + " \n总\r计",
              },
            ],
          },
          {
            name: "预警统计2",
            type: "pie",
            selectedMode: "single",
            radius: ["38%", "48%"],
            center: ["50%", "60%"],
            animation: false,
            label: {
              normal: {
                position: "inner",
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 4, //设置border的宽度有多大
                borderColor: "#001C39",
                color: "#0057a7",
              },
            },
            data: data.seriesData,
          },
          {
            name: "预警统计3",
            type: "pie",
            radius: ["55%", "65%"],
            center: ["50%", "60%"],

            label: {
              normal: {
                formatter: "{c|{c}}\n{b|{b}}",
                backgroundColor: "",
                borderRadius: 0,
                show: true,
                rich: {
                  c: {
                    color: "#00c2e5",
                    fontSize: 16,
                    backgroundColor: "",
                  },
                  b: {
                    color: "#ffffff",
                    fontSize: 16,
                    backgroundColor: "",
                  },
                },
              },
            },
            labelLine: {
              normal: {
                smooth: true,
                lineStyle: {
                  width: 2,
                },
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 4, //设置border的宽度有多大
                color: "#00dbfd",
                borderColor: "#001C39",
              },
              emphasis: {
                borderWidth: 4, //设置border的宽度有多大
                borderColor: "#001C39",
              },
            },

            data: data.seriesData,
          },
        ],
      });
    },
    // 驾驶员分析
    DriverBehaviorAnalysis() {
      var m2R2Data = [
        { value: 335, name: "正常", itemStyle: { color: "#5ed77e" } },
        { value: 310, name: "报警", itemStyle: { color: "#f7246e" } },
      ];

      this.myChart.setOption({
        title: [
          {
            text: this.pieData.title,
            textStyle: {
              fontSize: 16,
              color: "#000",
              fontFamily: "微软雅黑",
              fontWeight: "500",
            },
            textAlign: "center",
            left: "30%",
            //right: "10%",
            top: "5",
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: function (parms) {
            var str =
              parms.marker +
              "" +
              parms.data.name +
              "</br>" +
              "数量：" +
              parms.data.value +
              "</br>" +
              "占比：" +
              parms.percent +
              "%";
            return str;
          },
        },
        series: [
          {
            type: "pie",
            left: "20",
            top: "30%",
            center: ["50%", "40%"],
            radius: ["50%", "90%"],
            hoverAnimation: false,
            clockwise: false, // 饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "outside",
                lineHeight: 20,
                formatter: function (params) {
                  let context = `${params.name}\n{percent|${params.percent.toFixed(1)}%}`
                  return context;
                },
                rich: {
                  percent: {
                    color: '#000'
                  },
                }
              },
            },
            labelLine: {
              normal: {
                length: 8,
                length2: 8,
                smooth: false,
              },
            },
            data: this.pieData.m2R2Data,
          },
        ],
      });
    },
  },
  computed: {
    pieData() {
      let data = {
        m2R2Data: [],
        title: ''
      }
      data.m2R2Data = this.echartsData.m2R2Data.filter((el) => {
        return el.value
      })
      data.title = this.echartsData.title
      return data
    }
  },
  watch: {
    echartsData: {
      handler: function (val, oldVal) {
        this.initChart();
      },
      deep: true,
    },
  },
};
</script>

<style>
.pipeContent {
  height: 100%;
  width: 100%;
}
</style>
